import React, {Component} from 'react'
import {
    View,
    StyleSheet,
    Text,
    Image
} from 'react-native'

var Dimensions = require('Dimensions')
var {width} = Dimensions.get('window')

export default class HotBottomItem extends Component {
    render() {
        return (<View style={styles.container}>
            <Text style={[styles.titleStyle, {color: this.props.titleColor}]}>{this.props.title}</Text>
            <Text style={styles.subTitleStyle}>{this.props.subTitle}</Text>

            <Image
                style={[styles.image, {
                    width: this.props.imgWidth ? this.props.imgWidth : 90,
                    height: this.props.imgHeight ? this.props.imgHeight : 60
                }]}
                source={{uri: this.props.internetImage ? this.props.internetImage : 'http://localhost:8081/imgs/' + this.props.image + '.png'}}/>
        </View>)
    }
}

const styles = StyleSheet.create({

    titleStyle: {
        fontSize: 16,
    },
    subTitleStyle: {
        fontSize: 12
    },
    image: {
        marginTop: 5,
    },
    container: {
        width: (width - 20) / 4,
        backgroundColor: '#F8F8F8',
        alignItems: 'center',
        paddingTop:5,
        paddingBottom:5,
    }
})